<template>
	<view>
		<view class="nav">
			<view class="photo">
				<image src="" mode=""></image>
			</view>
			<view class="title">
				<view class="name">
					qweqew
				</view>
				<view class="id">
					id：63652323
				</view>
			</view>
		</view>
		<view class="tools">
			<view class="top">
				我的工具
			</view>
			<view class="bottom">
				<view class="item" @tap="promote">
					<view class="">
						<image src="/static/personal/tool_icon_1.png" mode=""></image>
					</view>
					<view class="">
						设置推广位
					</view>
				</view>
				<view class="item"  @tap="promoteOrder">
					<view class="">
						<image src="/static/personal/tool_icon_2.png" mode=""></image>
					</view>
					<view class="">
						我的推广订单
					</view>
				</view>
				<view class="item" @tap="guide">
					<view class="">
						<image src="/static/personal/tool_icon_3.png" mode=""></image>
					</view>
					<view class="">
						新手引导
					</view>
				</view>
			</view>
		</view>
		<view class="item-list">
			<view class="list-row" @tap="setting">
				<view class="left">
					设置
				</view>
				<view class="right">
					<image src="../../static/earnings/arrow-right.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods:{
			promote(){
				uni.navigateTo({
					url:"/pages/personals/promote/promote"
				})
			},
			promoteOrder(){
				uni.navigateTo({
					url:"/pages/personals/promoteOrder/promoteOrder"
				})
			},
			guide(){
				uni.navigateTo({
					url:"/pages/personals/newguid/newguid"
				})
			},
			setting(){
				uni.navigateTo({
					url:"/pages/personals/setting/setting"
				})
			}
		}
	}
</script>

<style lang="scss">
	.nav{
		height:425upx;
		background:rgba(232,39,27,1);
		border-radius: 0 0  40upx 40upx;
		padding:170upx 30upx 0;
		display: flex;
		align-items: center;
		.photo{
			image{
				display: block;
				background: blue;
				width: 100upx;
				height: 100upx;
				border-radius:50%;
			}
		}
		.title{
			margin-left: 20upx;
			font-size:40upx;
			font-weight:bold;
			color:rgba(255,255,255,1);
			.id{
				font-size:24upx;
				font-weight:500;
			}
		}
	}
	.tools{
		width:694upx;
		height:294upx;
		margin: -50upx auto 0;
		background:rgba(255,255,255,1);
		border-radius:20upx;
		.top{
			height:66upx;
			font-size:28upx;
			font-weight:bold;
			line-height:66upx;
			padding-left: 30upx;
			color:rgba(51,51,51,1);
			border-bottom:1upx solid #F2F2F2 ;
		}
		.bottom{
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 227upx;
			.item{
				text-align: center;
				width: 30%;
				font-size:24upx;
				font-weight:500;
				color:rgba(77,77,77,1);
				image{
					width: 64upx;
					height: 64upx;
					
				}
			}
		}
	}
	.item-list{
		margin: 20upx 30upx;
		.list-row{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:0 30upx;
			height: 100upx;
			background: #FFFFFF;
			border-radius:20upx ;
			.left{
				font-size:28upx;
				font-weight:500;
				color:rgba(51,51,51,1);
			}
			.right{
				image{
					display: block;
					width:22upx;
					height: 22upx;
				}
			}
		}
	}
	
</style>
